<template>
	<view class="main">
		<view v-if="showGuide" class="outer" @click="nextGuide(nextObj)" :class="{'prevent-click':!showNextButton}"  @touchmove.stop.prevent="moveHandle">
			<view class="inner scale-in-center" :style="[innerStyle]">
				<view style="position:relative;width: 100%;height:100%;" class="fade-in" v-if="showPointer">
					<image src="@/static/image/entry/pointer.png" class="pointer slide-top" mode="" />
				</view>
			</view>
			<view class="innerText fade-in" :style="[innerTextStyle]">
				<!-- <view v-if="nextBtnPosition === 'top' && showNextButton" class="next-btn-wrap">
					<slot name='nextButton'>
						<view class="next-btn">Got it~</view>
					</slot>
				</view> -->
				<text :style="[textStyle]">{{innerText}}</text>
				<!-- <view v-if="showNextButton" class="next-btn-wrap">
					<slot name='nextButton'>
						<view class="next-btn" @click="nextGuide(nextObj)">Got it~</view>
					</slot>
				</view> -->
				<view style="width: 30rpx;height: 30rpx;transform:rotate(45deg);position:absolute;background:#FFF;" :style="[angleStyle]">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "mask-guide-uni",
		data() {
			return {
				innerStyle: {},
				innerTextStyle: {},
				guide: 0,
				showGuide: false,
				innerText: '',
				deviceInfo: {},
				textStyle: {},
				showNextButton: true,
				showPointer: true,
				nextObj: '',
				nextBtnPosition: 'top',
				fixed: false,
				angleStyle: {},
				startStatus:false
			};
		},
		methods: {
			start(props) {
				this.startStatus = true;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0,
				});
				for (let k in props) {
					this[k] = props[k];
				};
				this.deviceInfo = uni.getSystemInfoSync();
				// this.$emit('nextGuide');
				this.nextGuide();
			},
			moveHandle(){

			},
			nextGuide(obj) {
				if (!this.startStatus) {
					return;
				}
				this.showGuide = false;
				if (obj) {
					if (obj.nextObj) {
						this.nextObj = obj.nextObj;
					} else {
						this.nextObj = ''
					}
					if (obj.showPointer) {
						this.showPointer = true;
					} else {
						this.showPointer = false;
					}
					if (obj.showNextButton) {
						this.showNextButton = true;
					} else {
						this.showNextButton = false;
					}
					if (obj.angleStyle) {
						this.angleStyle = obj.angleStyle
					}
				}
				
				const index = this.guide;
				uni.createSelectorQuery().select(`#guide-container #guide_${index}`).fields({
					id: true,
					dataset: true,
					rect: true,
					size: true,
					scrollOffset: true,
					context: true,
					properties: ['scrollX', 'scrollY'],
					computedStyle: ['borderRadius'],
				}, data => {
					if (data) {
						let {
							left,
							right,
							top,
							width,
							height,
							borderRadius,
							dataset
						} = data;
						//判断是否需要滚动
						const { windowHeight } = this.deviceInfo;
						this.innerStyle = {
							'left': `${left}px`,
							'top': `${top}px`,
							'width': `${width}px`,
							'height': `${height}px`,
							'borderRadius': borderRadius
						};
						//根据位置设置显示的位置
						const leftRpx = this.pxToRpx(left);
						let innerTextStyle = {
							'top': `${(this.fixed?top:200) + height + 14}px`,
						}
						if(leftRpx > 400){
							// innerTextStyle.textAlign = 'right';
							// innerTextStyle.right = `${750 - this.pxToRpx(right)}rpx`;
							// innerTextStyle.marginLeft = `10px`;
						}else{
							// innerTextStyle.textAlign = 'left';
							// innerTextStyle.left = `${left}px`;
							// innerTextStyle.marginRight = `10px`;
						}
						//如果长度够长 居中显示
						if(width > 300){
							// innerTextStyle.width = `${width}px`;
							innerTextStyle.textAlign = 'center';
						}
						//内容在可视区域以下
						console.log(top,windowHeight,height)
							uni.pageScrollTo({
							    scrollTop: top - 200,
							    duration: 0,
								complete:(e) => {
									console.log(e)
								}
							});
							// this.innerStyle.top = `${windowHeight - height - 10}px`;
						// if(windowHeight < top){
						// 	uni.pageScrollTo({
						// 	    scrollTop: top - windowHeight + height + 10,
						// 	    duration: 0
						// 	});
							this.innerStyle.top = `${this.fixed?top:200 }px`
						// }
						//内容在可视区域以上
						if(top < 0){
							uni.pageScrollTo({
							    scrollTop: top,
							    duration: 0
							});
							this.nextGuide();
							return;
						}
						//如果在可视区域下方，提示文字显示在上方
						if(parseFloat(this.innerStyle.top) > windowHeight / 2){
							innerTextStyle.bottom = `${windowHeight - parseFloat(this.innerStyle.top) + 14}px`;
							delete innerTextStyle.top;
							this.nextBtnPosition = 'top';
						}else{
							this.nextBtnPosition = 'bottom';
						}
						this.innerTextStyle = innerTextStyle;
						this.innerText = dataset.guideText ?? '';

						this.guide++;
						console.log(this.guide)
						setTimeout(() => {
							this.showGuide = true;
						}, 100);
					} else {
						this.showGuide = false;
						uni.pageScrollTo({
						    scrollTop: 0,
						    duration: 0
						});
						this.guide = 0;
					}
				}).exec()
				
			},
			pxToRpx(val){
				return val/(uni.upx2px(100)/100);
			}
		}
	}
</script>

<style lang="scss">
	.main {
	}
	.outer {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: transparent;
		overflow: hidden;
		z-index: 99999;
	}
	.prevent-click {
		pointer-events: none;
	}

	.inner {
		position: absolute;
		box-shadow: rgba(0, 0, 0, .8) 0 0 0 2021px;
		z-index: 99999;
	}

	.innerText {
		color: #0F0F0E;
		position: absolute;
		z-index: 99999;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		text-align: center;
		background: #fff;
		border-radius: 20rpx;
		width: 500rpx;
		padding: 32rpx 24rpx;
		left: 125rpx;
	}
	.next-btn-wrap{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.next-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		padding: 0 30rpx;
		border: 2rpx solid #ddd;
		border-radius: 10rpx;
		margin-top: 30rpx;
		font-size: 26rpx;
	}
	.pointer {
		position: absolute;
		bottom: -40rpx;
		left: 200rpx;
		width: 97rpx;
		height: 127rpx;
		z-index: 99999;
	}
	.slide-top {
		-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
				animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
	}
	@-webkit-keyframes slide-top {
		0% {
			-webkit-transform: translate(0,0);
					transform: translate(0,0);
		}
		100% {
			-webkit-transform: translate(20rpx,30rpx);
					transform: translate(20rpx,30rpx);
		}
	}
	@keyframes slide-top {
		0% {
			-webkit-transform: translate(0);
					transform: translate(0);
		}
		100% {
			-webkit-transform: translate(20rpx,30rpx);
					transform: translate(20rpx,30rpx);
		}
	}
	.scale-in-center {
		-webkit-animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
				animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}
	@-webkit-keyframes scale-in-center {
	0% {
		-webkit-transform: scale(5);
				transform: scale(5);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
				transform: scale(1);
		opacity: 1;
	}
	}
	@keyframes scale-in-center {
	0% {
		-webkit-transform: scale(5);
				transform: scale(5);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
				transform: scale(1);
		opacity: 1;
	}
	}

	.fade-in {
	-webkit-animation: fade-in 0.7s .7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 0.7s .7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-9-25 16:21:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


</style>
